<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Leaflet 加载 ArcGIS Online 地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        // 这个rest 服务的坐标系是 EPSG:4326 4326不是默认的L.crs.EPSG4326 不知道是啥玩意
        // 3857是默认的就和正常的一样，这个4326和L.crs.EPSG4326不一样

        var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
        var map,
            url = host + '/iserver/services/map-world/rest/maps/World';
        new L.supermap.MapService(url).getMapInfo().then((res) => {
            var crs = L.supermap.crsFromMapJSON(res.result);
            map = L.map('map', {
                crs: crs,
                center: [39.9042, 116.4074],
                maxZoom: 18,
                zoom: 6
            });
            new L.supermap.TiledMapLayer(url).addTo(map);
        });

        // 添加错误处理
        china100Layer.on('tileerror', function (e) {
            console.error('瓦片加载错误:', e);
            console.log('请求的瓦片URL:', e.tile.src);
        });

        // 添加加载成功处理
        china100Layer.on('tileload', function (e) {
            console.log('瓦片加载成功:', e.tile.src);
        });

        china100Layer.addTo(map);

        console.log('SuperMap China100 layer added:', china100Layer);

    </script>
</body>

</html>